<template>
  <div class="common-layout">
    <el-container class="el-container">
      <el-header class="header"><Header/></el-header>
      <el-container class="foot">
        <el-aside width="200px" class="aside"><Aside/></el-aside>
        <el-main style="background: #c9c4c4;"><MonitoringMain/></el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import Header from "../../components/Sixth/Header.vue";
import Aside from "../../components/Sixth/Aside.vue";
import MonitoringMain from "../../components/Sixth/MonitoringMain.vue";
import {reactive} from "vue";
export default {
  name: "TestView",
  components:{
    Header,
    Aside,
    MonitoringMain
  },
  setup(){
    let user=reactive({})
    return {user}
  }
}
</script>
<style scoped>
/*设置整个页面样式*/
html, body{
  height: 100%;
}
/*设置顶栏样式*/
.el-container{
  gap: 10px;
  height: 100%;
  background: white;
}
.header{
  display: contents;
  background: #eeeeee;
}
/*设置侧边栏样式*/
.aside{
  background: #98caf8;
}

</style>